import '../public/index'
import url from '../data/url'
import request from '../data/request'
import { header } from '../data/config'
import { getUrlParam } from '../data/util'
import store from 'store'

const base          = url.base,
      editNotice    = request.editNotice,
      NoticeDetail  = request.NoticeDetail;

let id = getUrlParam('id');

// 初始化页面数据
  init()
  function init() {
    $.ajax({
      headers: header,
      url: base + NoticeDetail,
      type: 'POST',
      data: {id : id}
    })
      .done(function (res) {
        console.log(res)

          let headStr   = res.headStr,
              title     = res.title,
              footerStr = res.footerStr,
              detail    = res.details;

          $('#headStr').val(headStr);
          $('#footerStr').val(footerStr);
          $('#title').val(title);

        if( detail && detail.length !==0){

          let html = '',
              i = 0,
              len = detail.length;

          for (; i < len; i++) {
             html += `<li class="notice-deploy-item">
                      <input value="${ detail[i].columnName }" class="form-control" type="text">
                      <b>:</b>
                      <select class="form-control" name="" id="">
                      <option ${ detail[i].columnValue == '' ? 'selected' : ''} value="">请选择</option>
                      <option ${ detail[i].columnValue == 'name' ? 'selected' : ''} value="name">客户姓名</option>
                      <option ${ detail[i].columnValue == 'ebank' ? 'selected' : ''} value="ebank">E卡账号</option>
                      <option ${ detail[i].columnValue == 'channel' ? 'selected' : ''} value="channel">开户行</option>
                      <option ${ detail[i].columnValue == 'payAmount' ? 'selected' : ''} value="payAmount">存款金额</option>
                      <option ${ detail[i].columnValue == 'identityCard' ? 'selected' : ''} value="identityCard">身份证号</option>
                      <option ${ detail[i].columnValue == 'rawAddTime' ? 'selected' : ''} value="rawAddTime">办理时间</option>
                      <option ${ detail[i].columnValue == 'phone' ? 'selected' : ''} value="phone">联系方式</option>
                      </select>
                      <a class="goTop glyphicon glyphicon-arrow-up" href=""></a>
                      <a class="delete glyphicon glyphicon-remove" href=""></a>
                      </li>`;
          }

          $('#notice-deploy-list').html(html);

        }

      })
      .fail(function (res) {
        console.log(res)

        layer.msg('获取详情失败', {
          icon: 5
        })

      })
      .always(function (res) {

        console.log("complete")

      })
  };

//  点击新增一行弹出模态框
  $('.notice-deploy-btn button').on('click', (e) => {
    e.preventDefault();

    bootbox.confirm({
      title: '新增信息',
      message: '<div class="notice-deploy-layer">\
                <input id="notice-deploy-input" placeholder="输入名称" class="form-control" type="text">\
                <b>:</b>\
                <select id="notice-deploy-select" class="form-control" name="" id="">\
                <option value="">请选择</option>\
                <option value="name">客户姓名</option>\
                <option value="ebank">E卡账号</option>\
                <option value="channel">开户行</option>\
                <option value="payAmount">存款金额</option>\
                <option value="identityCard">身份证号</option>\
                <option value="rawAddTime">办理时间</option>\
                <option value="phone">联系方式</option>\
                </select>\
                </div>',
      buttons: {
        cancel: {
          label: '取消'
        },
        confirm: {
          label: '确认'
        }
      },
      callback: (result) => {

        if (!result) {
          return
        }

        let input = $('#notice-deploy-input').val(),
          select = $('#notice-deploy-select').val();

        if(input === '' || select === ''){

          layer.msg('数据不能为空', {
            icon: 5
          })

          return false
        }

        let  html = `<li class="notice-deploy-item">
                    <input value="${ input }" class="form-control" type="text">
                    <b>:</b>
                    <select class="form-control" name="" id="">
                    <option ${ select == '' ? 'selected' : ''} value="">请选择</option>
                    <option ${ select == 'name' ? 'selected' : ''} value="name">客户姓名</option>
                    <option ${ select == 'ebank' ? 'selected' : ''} value="ebank">E卡账号</option>
                    <option ${ select == 'channel' ? 'selected' : ''} value="channel">开户行</option>
                    <option ${ select == 'payAmount' ? 'selected' : ''} value="payAmount">存款金额</option>
                    <option ${ select == 'identityCard' ? 'selected' : ''} value="identityCard">身份证号</option>
                    <option ${ select == 'rawAddTime' ? 'selected' : ''} value="rawAddTime">办理时间</option>
                    <option ${ select == 'phone' ? 'selected' : ''} value="phone">联系方式</option>
                    </select>
                    <a class="goTop glyphicon glyphicon-arrow-up" href=""></a>
                    <a class="delete glyphicon glyphicon-remove" href=""></a>
                    </li>`;


        $('#notice-deploy-list').append(html);

      }
    })
  });

//  点击删除按钮删除点击行
  $('#notice-deploy-list').on('click', '.delete', (e) => {
    e.preventDefault();

    $(e.target).parent().remove();
  })

//  点击置顶按钮置顶点击行
  $('#notice-deploy-list').on('click', '.goTop', (e) => {
    e.preventDefault();

    let self = $(e.target).parent().clone();

    $('#notice-deploy-list .notice-deploy-item:first-child').before(self);
    $(e.target).parent().remove();
  })

//保存事件
$("#save").click(function(){

  $('#save').attr('disabled',true);

  let templateDetails = new Array(),
      items = $("#notice-deploy-list .notice-deploy-item");

  $.each(items,(i, p) => {

    let name   = p.children[0].value,	  //名称
        value  = p.children[2].value,	//值属性名
        seqStr = (i + 1);

    templateDetails.push({columnName: name, columnValue: value, seqStr: seqStr});

  });

   let loading_modal = layer.msg('提交中...', {
   icon: 16,
   time: 0
   })

   $.ajax({
   headers: header,
   url: base + editNotice,
   contentType: "application/json",
   type: 'POST',
   data: JSON.stringify({id: id,details: templateDetails,title: $("#title").val(),headStr: $("#headStr").val(),footerStr: $("#footerStr").val()})
   })
   .done(function (res) {
   console.log(res)

   if (res.code == 0) {

     layer.msg('保存成功,跳转至列表页', {
     icon: 6
     })

     setTimeout(() => {
       $('#save').attr('disabled',false);
       window.location.href = './index.html';
     },500)

   } else {

     layer.msg( res.message, {
     icon: 5
     })

   }
   })
   .fail(function (res) {
   console.log(res)

   layer.msg('保存失败', {
   icon: 5
   })

   })
   .always(function (res) {
   console.log("complete")

   layer.close(loading_modal)

   })
})

